<template>
  <div class="container">
    <div class="header" >
      <home @addTaskName="addTaskName"/>
    </div>
    <div  class="center">
      <category :taskList="taskList" @isChecked="isChecked" @deleteItem="deleteItem"/>
    </div>
    <div class="bottom">
      <profile :taskLength="taskList.length" :checkedLength="checkedLength" @clearTask="clearTask"/>
    </div>


  </div>
</template>

<script>
  import Home from "../home/Home.vue";
  import Category from "../category/Category";
  import Profile from "../profile/Profile";
  export default {
    name: "shopCart",
    components:{
      Home,
      Category,
      Profile
    },

    data(){
      return {
        taskList:[
          {isChecked:true,title:'今日任务'},
          {isChecked:true,title:'今日任务2'},
          {isChecked:false,title:'今日任务3'},
          {isChecked:false,title:'今日任务4'},
        ]
      }
    },
    computed:{
      checkedLength(){
        return this.taskList.filter(item=>item.isChecked).length
      },

    },
    methods:{
      //home子组件调用该方法
      addTaskName(taskName){
        this.taskList.push({isChecked:false,title:taskName})
        console.log(JSON.stringify(this.taskList))
      },
      //category 子组件调用
      isChecked(index){
          this.taskList[index].isChecked = !this.taskList[index].isChecked
      },
      //category 子组件调用
      deleteItem(index){
          this.taskList.splice(index,1);
      },
      //profile 子组件调用清除任务
      clearTask(){
        this.taskList = this.taskList.filter(item=>!item.isChecked)
      }
    }
  }
</script>

<style scoped>
  .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90vh;
    padding: 2px 5px;
  }
  .header{
    width: 100%;
    height: 40px;
  }
  .center{
    flex: 1;
    overflow: auto;
  }
  .bottom{
    height: 40px;
  }
</style>
